<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>粘贴上传图片</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
        }

        #app {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #app > h1 {
            font-size: 25px;
            color: #333;
            margin: 20px 0 5px 0;
        }

        #app .info {
            margin-top: 5px;
            margin-bottom: 15px;
        }

        a {
            text-decoration: none;
        }

        #app .info a {
            color: #333333;
        }

        #app .info a.active {
            color: cornflowerblue;
        }

        #tar_box {
            width: 500px;
            height: 300px;
            border: 1px solid #6d84b3;
            position: relative;
            border-radius: 5px;
            transition: all 0.3s;
            padding: 20px;
        }

        #tar_box:focus {
            border: 1px solid #767;
        }

        #tar_box::after {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            content: '图片上传区域';
            color: #777;
        }

        #app .img_list_msg {
            display: flex;
            width: 500px;
            justify-content: left;
            margin-top: 20px;
            margin-bottom: 5px;
            font-size: 12px;
            color: #555;
        }

        #img_list {
            width: 500px;
            max-height: 500px;
            display: flex;
            flex-wrap: wrap;
        }

        #img_list img {
            height: 100px;
            margin-bottom: 20px;
            margin-right: 20px;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            cursor: pointer;
        }
    </style>
    <link rel="stylesheet" href="/static/viewer/css/viewer.css">
    <link rel="stylesheet" href="/static/elementui/theme-chalk/index.css">

</head>
<body>
<div id="app">
    <h1>基于复制粘贴的图片上传</h1>
    <div class="info">
        <a href="/" class="active">直接上传到static目录</a>
        <a href="/up_sql/">上传到数据库</a>
        <a href="/up_drag_drop/">拖拽上传</a>
        <a href="/paste_url/">粘贴图片url上传</a>
    </div>
    <div @paste="edit_photo" title="选中此区域，粘贴图片即可上传" contenteditable="true" id="tar_box">

    </div>
    <div class="img_list_msg">
        已上传图片列表
    </div>
    <div id="img_list">
        <!--鼠标右击事件@contextmenu.prevent -->
        {% for img in img_list %}
            <img @contextmenu.ctrl.prevent="delete_photo" src="/static/upload/{{ img }}" alt="">
        {% endfor %}
    </div>
</div>

<script src="/static/js/vue.js"></script>
<script src="/static/js/jquery.js"></script>
<script src="/static/elementui/index.js"></script>
<script>
    new Vue({
        el: '#app',
        methods: {
            edit_photo(e) {
                let clipboardData = (e.clipboardData || e.originalEvent.clipboardData);
                let items = clipboardData.items, len = items.length, blob = null;
                //阻止默认行为即不让剪贴板内容在div中显示出来


                //在items里找粘贴的image,据上面分析,需要循环
                for (let i = 0; i < len; i++) {
                    if (items[i].type.indexOf("image") !== -1) {
                        //getAsFile() 此方法只是living standard firefox ie11 并不支持
                        blob = items[i].getAsFile();
                    }
                }

                if (blob !== null) {
                    // 读取图片文件
                    let reader = new FileReader();
                    reader.onload = function (event) {
                        // event.target.result 即为图片的Base64编码字符串
                        let base64_str = event.target.result
                        //可以在这里写上传逻辑 直接将base64编码的字符串上传（可以尝试传入blob对象，看看后台程序能否解析）
                        uploadImgFromPaste(base64_str);
                    }
                    reader.readAsDataURL(blob);
                    e.preventDefault();
                    return
                }
                // 非图片

            },

            delete_photo(e) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let src_list = e.target.src.split('/'), len = src_list.length

                    $.post('/delete_photo/', {name: src_list[len - 1]}, res => {
                        location.reload()
                    })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })
            }
        }
    })

    // jquery_ajax
    function uploadImgFromPaste(file) {
        $.post('/upload_image_by_paste/', {image: file}, res => {
            $('#img_list').append(`<img src="${res.store_path}" alt="">`)
        })
    }

</script>
<script src="/static/viewer/js/viewer.js"></script>
<script>
    $(function () {
        $('#img_list').viewer({
            url: 'src',
        });
    });
</script>
</body>
</html>